<template>
    <div class="page">
        <p>捆图</p>
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            cities: {
                name: "",
                children: [
                    { name: "北京" },
                    { name: "上海" },
                    { name: "杭州" },
                    { name: "广州" },
                    { name: "桂林" },
                    { name: "昆明" },
                    { name: "成都" },
                    { name: "西安" },
                    { name: "太原" }
                ]
            },
            railway: [
                { source: "北京", target: "上海" },
                { source: "北京", target: "广州" },
                { source: "北京", target: "杭州" },
                { source: "北京", target: "西安" },
                { source: "北京", target: "成都" },
                { source: "北京", target: "太原" },
                { source: "北京", target: "桂林" },
                { source: "北京", target: "昆明" },
                { source: "北京", target: "成都" },
                { source: "上海", target: "杭州" },
                { source: "昆明", target: "成都" },
                { source: "西安", target: "太原" }
            ]
        }
    },
    methods: {
        draw() {
            let svgWidth = 800,
                svgHeight = 800,
                colors = d3.schemeCategory10
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            let gBundle = this.svg
                .append("g")
                .attr(
                    "transform",
                    `translate(${svgWidth / 2},${svgHeight / 2})`
                )
            let cities = d3.hierarchy(this.cities)
            let clusterLayout = d3
                .cluster()
                .size([360, svgWidth / 2 - 50])
                .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)
            clusterLayout(cities)
            let links = this.getLinks(cities.descendants(), this.railway);
            let realLinks = [];
            links.forEach(item=>{
                realLinks.push(item.source.path(item.target))
            })
            console.log(realLinks, cities)
            let linePath = d3
                    .radialLine ()
                    .angle(d=>d.x/180*Math.PI)
                    .radius(d=>d.y)
                    .curve(d3.curveBundle.beta(1));
            gBundle
                .selectAll(".link")
                .data(realLinks)
                .join("path")
                .attr("class", "link")
                .attr("d",linePath)
                .attr('fill','none')
                .attr('stroke','black')
                .attr('stroke-width',8)
                .attr('stroke-opacity',.5);
            let node = gBundle.selectAll('.node')
            .data(cities.children)
            .join('g')
            .attr('class','node')
            .attr('transform',d=>`rotate(${d.x-90})translate(${d.y})rotate(${90-d.x})`)
            node.append('circle')
            .attr('r',20)
            .style('fill',(d,i)=>colors[i])
            node.append('text')
            .attr('dy','.2em')
            .style('text-anchor','middle')
            .text(d=>d.data.name)
        },
        getLinks(node, link) {
            let hash = {}
            for (let i = 0; i < node.length; i++) {
                hash[node[i].data.name] = node[i]
            }
            let result = []
            for (let i = 0; i < link.length; i++) {
                result.push({
                    source: hash[link[i].source],
                    target: hash[link[i].target]
                })
            }
            return result
        }
    },
    mounted() {
        this.draw()
    }
}
</script>
